<template>
    <div style="" class="charts_size">
        <ve-chart height="100%" width="100%" :extend="this.chartSettings.type!=='pie'?extend:extendPie" :colors="colors" :data="chartData" :settings="chartSettings"></ve-chart>
    </div>
</template>

<script>
export default {
    props: ['chartData', 'chartSettings', 'colors', 'chartTitle'],
    data () {
        return {
            extend: {
                series: {
                    label: { show: true, position: "top", fontWeight: 600, fontSize: 28 },
                    smooth: 0
                },

                legend: {
                    right: 10,
                    width: 300
                },
                xAxis: {
                    axisLabel: {
                        fontWeight: 600,
                        fontSize: 20
                    }
                }
            },

            extendPie: {
                series: { label: { fontSize: 28 } },
                legend: {
                    right: 10,
                    width: 300
                },
            }
        }
    },
    computed:{
        // formateData(){
        //     if(this.chartData){
        //         return 
        //     }
        // }
    },
}
</script>

<style>
    .charts_size{
        height:100%;
        width:100%
    }
@media screen and (max-width: 1600px){
    /* .charts_size{
        height:100%;
        width:90%;
        position:absolute;
        top: 50px;
    } */
}
</style>